<template>
  <div class="backCalendarContainer">
      <header>
        <div class="arrowBox" @click="preMouth">
          <span id="preMouth"></span>
        </div>
        {{this.currentYear}}年{{this.currentMouth+1}}月
        <div class="arrowBox" @click="nextMouth">
          <span id="nextMouth"></span>
        </div>
      </header>
      <section class="calendarContainer">
        <table>
          <tr class="calendarTR">
            <th v-for="item in weeks" v-text="item" :key="item"></th>
          </tr>
          <tr v-for="tr in 6" class="calendarTR" :key="tr">
            <td  
              v-if="((tr-1)*7+td-firstDayInWeek)>0 && ((tr-1)*7+td-firstDayInWeek <= currentDays)" 
              v-for="td in 7" 
              v-text="(tr-1)*7+td-firstDayInWeek"
              :key="td"
              :class="isDay(getDataDate((tr-1)*7+td-firstDayInWeek))"
              :days="(tr-1)*7+td-firstDayInWeek"
              @click="showMoney"
              ></td>
            <td 
              :class="isDay(getDataDate((tr-1)*7+td-firstDayInWeek))"
              v-else 
              v-text="getDay((tr-1)*7+td-firstDayInWeek).getDate()" 
              :days="(tr-1)*7+td-firstDayInWeek"
              class="otherDay"
              @click="showMoney"
              >
              </td>
          </tr>
        </table>
      </section>
  </div>
</template>
<script>
import {getBackPlan} from '../../../../service/getData.js'
import {getStore} from '../../../../config/mUtils.js'

let now = new Date();
let year = now.getFullYear(),
    month = now.getMonth(),
    date = now.getDate();

export default {
  components:{
  },
  // props:['item'],
  created(){
    this.currentYear = now.getFullYear();
    this.currentMouth = now.getMonth();
    this.currentDate = now.getDate();
    // //console.log(this.item);
  },
  data(){
    return {
      weeks:['日','一','二','三','四','五','六'],
      dayMouth:[31,28+this.isLeap(this.currentYear),31,30,31,30,31,31,30,31,30,31],
      currentYear:'',
      currentMouth:'',
      currentDate:'',
      days:[],
      hasInfo:'hasInfo',
      nowEL:document.getElementsByClassName('now'),
      currentClickDate:{},
      item:null
    }
  },
  watch:{
    item(val,val2){
      this.days = []
      if(val.datalist){
        val.datalist.forEach(el => {
          let a = new Date(Date.parse(el.date.replace(/-/g,  "/"))).getTime()/1000
          this.days.push(a)
        });
        // //console.log(this.days)
      }
    }
  },
  computed:{
    trCount(){
      return Math.ceil((this.currentDays+this.firstDayInWeek)/7);
    },
    firstDay(){
      return new Date(this.currentYear,this.currentMouth,1);
    },
    firstDayInWeek(){
      return this.firstDay.getDay();;
    },
    currentDays(){
      return this.dayMouth[this.currentMouth];
    }
  },
  methods:{
    showMoney(el){
      this.currentClickDate = el
      if(el.target.className.match(/hasInfo/)){
        let clickDate = new Date(this.currentYear,this.currentMouth,el.target.attributes.days.nodeValue).getTime()/1000;
        for(let i=0;i<this.days.length;i++){
          if(this.days[i] == clickDate){
            this.$emit('money',parseFloat(this.item.datalist[i].flsum)+parseFloat(this.item.datalist[i].bjsum)+parseFloat(this.item.datalist[i].lxsum))
            clickDate = null
          }
        }
      }else{
        this.$emit('money','0')
      }
      if(this.nowEL.length != 0){
        this.nowEL[0].className = this.nowEL[0].className.replace(/now/,' ')
      }
      el.target.className +=" now"
    },
    isDay(day){
      let now1 = new Date(year,month,date).getTime()/1000;
      let cssStr = '';
      if(day == now1){
        cssStr = 'now'
      }
      for (const a of this.days) {
        if(a == day){
          if(cssStr != ''){
            cssStr += ' hasInfo'
          }else{
            cssStr = 'hasInfo'
          } 
        }
        if(a == now){
          let index = this.days.indexOf('now')
          this.$emit('money',this.item.datalist[index].count)
        }
      }
      return cssStr;
    },
    getDay(day){
      let otherDay = new Date(this.currentYear,this.currentMouth,day);
      return  otherDay;
    },
    getDataDate(day){
      let otherDay = new Date(this.currentYear,this.currentMouth,day).getTime()/1000
      return otherDay;
    },
    isLeap(year){
      return year%100==0?((year%400==0)?1:0):(year%4==0?1:0)
    },
    preMouth(){
      this.$emit('money','0')
      if(this.currentMouth<1){
        this.currentMouth = 11
        this.currentYear--
      }else{
        this.currentMouth--;
      }
      // //console.log(`${this.currentYear}/${this.currentMouth}`)
      if(this.currentClickDate.target){
        this.currentClickDate.target.className = ""
      }
        this.getCurrentData()
    },
    nextMouth(){
      this.$emit('money','0')
      // this.currentDate = 15
      if(this.currentMouth > 10){
        this.currentMouth = 0
        this.currentYear++
      }else{
        this.currentMouth++
      }
      // //console.log(`${this.currentYear}/${this.currentMouth}`)
      if(this.currentClickDate.target){
        this.currentClickDate.target.className = ""
      }
      this.getCurrentData()
    },
    getCurrentData(month){
      getBackPlan(
          getStore('loginkey'),
          `${this.currentYear}-${this.currentMouth+1}-01`,
          `${this.currentYear}-${this.currentMouth+1}-${this.dayMouth[this.currentMouth]}`,
          `${this.currentYear}-${this.currentMouth+1}`)
        .then(res=>{
          // //console.log(res)
          if(res.status == 1){
            this.item = res
            this.$emit('getCurrentData',res)
          }
        })
    }
  },
  mounted(){
    this.getCurrentData()
  }
}
</script>
<style lang="less">
  @import '../../../../style/mixin.less';

  .backCalendarContainer{
    .wh(100%,6.4rem);
    margin-top: .4rem;
    .sc(0.4rem,#000);
    .fx(column);
    .arrowBox{
      display: inline-block;
      #preMouth{
        display: inline-block;
        border: .16rem solid #000;
        border-top: .16rem solid transparent;
        border-bottom: .16rem solid transparent;
        border-left: .16rem solid transparent;
        margin-right: .18rem;
      }
      #nextMouth{
        display: inline-block;
        border: .16rem solid #000;
        border-top: .16rem solid transparent;
        border-bottom: .16rem solid transparent;
        border-right: .16rem solid transparent;
        margin-left: .18rem;
      }
    }
    .calendarContainer{
      .wh(100%,100%);
      .calendarTR{
        .wh(8.9rem,.9rem);
        .fx(row,space-between);
        th,td{
          flex:1;
          position: relative;
        }
        td{
          text-align: center;
          line-height: .9rem;
        }
      }
    .infoMoney{
      text-align: center;
    }
    .otherDay{
      color:#a3a3a3
    }
    }
    .now{
      color:#fff !important;
    }
    .hasInfo::before,.now::after{
      content: '';
      background-color: rgb(223, 56, 48);
      display: inline-block;
      .wh(.1rem,.1rem);
      .borderRadius(.05rem);
      position: absolute;
      top:.8rem;
      left: 46%;
    }
    .now::after{
      .wh(.6rem,.6rem);
      .borderRadius(50%);
      top:15%;
      left: 26%;
      z-index: -1;
    }
  }
</style>
